<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学生管理</el-breadcrumb-item>
      <el-breadcrumb-item>幼儿数据管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getStudentList" @keyup.enter="getStudentList">
            <el-button slot="append" icon="el-icon-search" @click="getStudentList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" @click="addStudentVisible = true">添加数据</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="addStudentFormDialogVisible = true">批量导入</el-button>
        </el-col>
      </el-row>

      <!-- 学生列表区域 -->
      <el-table :data="StudentList" border stripe>
        <el-table-column label="学号" prop="username"></el-table-column>
        <el-table-column label="姓名" prop="realName"></el-table-column>	
        <el-table-column label="性别" prop="sex"></el-table-column>
        <el-table-column label="入学年份" prop="enteryear"></el-table-column>
        <el-table-column label="年级" prop="grade"></el-table-column>
        <el-table-column label="幼儿班级" prop="clsName"></el-table-column>
        <el-table-column label="家长联系人姓名" prop="parent"></el-table-column>
        <el-table-column label="家长联系人电话" prop="parentPhone"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showeditStudent(scope.row.id)"></el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeStudentById(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNo"
                     :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>

    <!-- 添加学生的对话框 -->
    <el-dialog title="添加幼儿数据" :visible.sync="addStudentVisible" width="50%" @close="addStudentClosed">
      <!-- 内容主体区域 -->
      <el-form :model="addStudentForm" :rules="addStudentFormRules" ref="addStudentFormRef" label-width="70px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addStudentForm.name"></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="username">
          <el-input v-model="addStudentForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addStudentForm.password"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="addStudentForm.sex"></el-input>
        </el-form-item>
        <el-form-item label="入学年份" prop="year">
          <el-input v-model="addStudentForm.year"></el-input>
        </el-form-item>
        <el-form-item label="幼儿班级" prop="classroomId">
          <el-input v-model="addStudentForm.classroomId"></el-input>
        </el-form-item>
        <el-form-item label="家长联系人姓名" prop="parentName">
          <el-input v-model="addStudentForm.parentName"></el-input>
        </el-form-item>
        <el-form-item label="家长联系人电话" prop="phone">
          <el-input v-model="addStudentForm.phone"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addStudentVisible = false">取 消</el-button>
        <el-button type="primary" @click="addStudent">确 定</el-button>
      </span>

    </el-dialog>

    <el-dialog title="批量导入幼儿数据" :visible.sync="addStudentFormDialogVisible" width="30%" @close="addStudentFormDialogClosed">
      <el-form  ref="fileFormRef" :v-modle="fileForm">
        <el-form-item label="批量导入"   >
          <el-link  type="primary" href="http://120.27.233.52:8080/student.xlsx" >下载模板</el-link><br/>
          <input type="file"  @change="getFile($event)" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addStudentFormDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addStudents">确 定</el-button>
      </span>

    </el-dialog>

    <!-- 修改学生的对话框 -->
    <el-dialog title="修改幼儿数据" :visible.sync="editStudentVisible" width="50%" @close="editStudentClosed">
      <el-form :model="editStudentForm" :rules="editStudentFormRules" ref="editStudentFormRef" label-width="70px">
        <el-form-item label="姓名" prop="realName">
          <el-input v-model="editStudentForm.realName"></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="username">
          <el-input v-model="editStudentForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="editStudentForm.password"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="editStudentForm.sex"></el-input>
        </el-form-item>
        <el-form-item label="入学年份" prop="enteryear">
          <el-input v-model="editStudentForm.enteryear"></el-input>
        </el-form-item>
        <el-form-item label="幼儿班级" prop="clsName">
          <el-input v-model="editStudentForm.clsName"></el-input>
        </el-form-item>
        <el-form-item label="家长联系人姓名" prop="parent">
          <el-input v-model="editStudentForm.parent"></el-input>
        </el-form-item>
        <el-form-item label="家长联系人电话" prop="parentPhone">
          <el-input v-model="editStudentForm.parentPhone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editStudentVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分配角色的对话框 -->
  </div>
</template>

<script>
    export default {
        data() {
            // 验证邮箱的规则
            var checkEmail = (rule, value, cb) => {
                // 验证邮箱的正则表达式
                const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

                if (regEmail.test(value)) {
                    // 合法的邮箱
                    return cb()
                }

                cb(new Error('请输入合法的邮箱'))
            }

            // 验证手机号的规则
            var checkMobile = (rule, value, cb) => {
                // 验证手机号的正则表达式
                const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

                if (regMobile.test(value)) {
                    return cb()
                }

                cb(new Error('请输入合法的手机号'))
            }

            return {
                // 获取学生列表的参数对象
                queryInfo: {
                    query: '',
                    // 当前的页数
                    pageNo:1,
                    // 当前每页显示多少条数据
                    pageSize:5
                },
                StudentList: [],

                total: 0,
                // 控制添加学生对话框的显示与隐藏
                addStudentVisible: false,
                addStudentFormDialogVisible: false,
                // 添加学生的表单数据
                addStudentForm: {
                    name: '',
                    username:'',
                    password: '',
                    sex: '',
                    year: '',
                    classroomId: '',
                    parentName: '',
                    phone: ''
                },
                fileForm:{
                    file:'',
                    classroomId:'2'
                },
                fileList: [],
                // 添加表单的验证规则对象
                addStudentFormRules: {
                    name: [{
                        required: true,
                        message: '请输入学生名',
                        trigger: 'blur'
                    },
                        {
                            min: 3,
                            max: 10,
                            message: '学生名的长度在3~10个字符之间',
                            trigger: 'blur'
                        }
                    ],
                    username: [{
                        required: true,
                        message: '请输入学号',
                        trigger: 'blur'
                    },
                        {
                            min: 3,
                            max: 10,
                            message: '学号的长度在3~10个字符之间',
                            trigger: 'blur'
                        }
                    ],
                    parentName: [{
                        required: true,
                        message: '请输入家长',
                        trigger: 'blur'
                    },
                        {
                            min: 3,
                            max: 10,
                            message: '家长的长度在3~10个字符之间',
                            trigger: 'blur'
                        }
                    ],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },
                        {
                            min: 6,
                            max: 15,
                            message: '学生名的长度在6~15个字符之间',
                            trigger: 'blur'
                        }
                    ],
                    email: [{
                        required: true,
                        message: '请输入邮箱',
                        trigger: 'blur'
                    },
                        {
                            validator: checkEmail,
                            trigger: 'blur'
                        }
                    ],
                    phone: [{
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    },
                        {
                            validator: checkMobile,
                            trigger: 'blur'
                        }
                    ]
                },
                // 控制修改学生对话框的显示与隐藏
                editStudentVisible: false,
                // 查询到的学生信息对象
                editStudentForm: {
                    realName: '',
                    username: '',
                    password: '',
                    sex: '',
                    enteryear: '',
                    classroomId: '',
                    parent: '',
                    parentPhone: ''
                },
                // 修改表单的验证规则对象
                editStudentFormRules: {
                	name: [{
                        required: true,
                        message: '请输入学生名',
                        trigger: 'blur'
                    },
                        {
                            min: 3,
                            max: 10,
                            message: '学生名的长度在3~10个字符之间',
                            trigger: 'blur'
                        }
                    ],
                    username: [{
                        required: true,
                        message: '请输入学号',
                        trigger: 'blur'
                    },
                        {
                            min: 3,
                            max: 10,
                            message: '学号的长度在3~10个字符之间',
                            trigger: 'blur'
                        }
                    ],
                    parent: [{
                        required: true,
                        message: '请输入家长',
                        trigger: 'blur'
                    },
                        {
                            min: 3,
                            max: 10,
                            message: '家长的长度在3~10个字符之间',
                            trigger: 'blur'
                        }
                    ],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },
                        {
                            min: 6,
                            max: 15,
                            message: '学生名的长度在6~15个字符之间',
                            trigger: 'blur'
                        }
                    ],
                    email: [{
                        required: true,
                        message: '请输入学生邮箱',
                        trigger: 'blur'
                    },
                        {
                            validator: checkEmail,
                            trigger: 'blur'
                        }
                    ],
                    parentPhone: [{
                        required: true,
                        message: '请输入学生手机',
                        trigger: 'blur'
                    },
                        {
                            validator: checkMobile,
                            trigger: 'blur'
                        }
                    ]
                },
                // 控制分配角色对话框的显示与隐藏
                setRoleDialogVisible: false,
                // 需要被分配角色的学生信息
                userInfo: {},
                // 所有角色的数据列表
                rolesList: [],
                // 已选中的角色Id值
                selectedRoleId: ''
            }
        },
        created() {
            this.getStudentList()
        },
        methods: {
            async getStudentList() {

                const { data: res } = await this.$http.get('/student', {
                    params: this.queryInfo
                })
                if (res.code !== 200) {
                    return this.$message.error('获取学生列表失败！')
                }
                this.StudentList = res.data.info
                this.total = res.data.total
                console.log(this.StudentList)
            },
            // 监听 pageSize 改变的事件
            handleSizeChange(newSize) {
                this.queryInfo.pageSize = newSize
                this.getStudentList()
            },
            // 监听 页码值 改变的事件
            handleCurrentChange(newPage) {
                this.queryInfo.pageNo = newPage
                this.getStudentList()
            },
            // 监听添加学生对话框的关闭事件
            addStudentClosed() {
                this.$refs.addStudentFormRef.resetFields()
            },

            // 点击按钮，添加新学生
            addStudent() {
                let form = new FormData()
                form.append('name',this.addStudentForm.name)
                form.append('username',this.addStudentForm.username)
                form.append('password',this.addStudentForm.password)
                form.append('classroomId',this.addStudentForm. classroomId)
                form.append('phone',this.addStudentForm.phone)
                form.append('year',this.addStudentForm.year)
                form.append('parentName',this.addStudentForm.parentName)
                form.append('sex',this.addStudentForm.sex)
                this.$refs.addStudentFormRef.validate(async valid => {
                    if (!valid) return
                    const { data: res } = await this.$http.post('/student',form)

                    if (res.code !== 200) {
                        this.$message.error('添加学生失败！')
                    }

                    this.$message.success('添加学生成功！')
                    // 隐藏添加学生的对话框
                    this.addStudentVisible = false
                    // 重新获取学生列表数据
                    this.getStudentList()
                })
            },
            addStudentFormDialogClosed() {
                this.$refs.fileFormRef.resetFields()
            },
            async addStudents() {
                var formData = new FormData()
                formData.append('file', this.fileForm.file)
                formData.append('classroomId', this.fileForm.classroomId)


                    const { data: res } = await this.$http.post('Upload/studentImportExcel ',formData,{
                            headers:{
                                'Content-Type':'multipart/form-data'
                            },
                        }
                    )
                    console.log(res)
                    if (res.code !== -1) {
                        this.$message.error('批量导入失败！')
                    }

                    this.$message.success('批量导入成功！')
                    this.addStudentFormDialogVisible = false
                    this.getStudentList()

            },
            getFile(event){
                this.fileForm.file = event.target.files[0]
                console.log(this.fileForm.file)
            },
            // 展示编辑学生的对话框
            async showeditStudent(id) {

                const { data: res } = await this.$http.get('/student/'+ id)
                if (res.code !== 200) {
                    return this.$message.error('查询学生信息失败！')
                }

                this.editStudentForm = res.data
                this.editStudentForm.id = id
                this.editStudentVisible = true
            },
            // 监听修改学生对话框的关闭事件
            editStudentClosed() {
                this.$refs.editStudentFormRef.resetFields()
            },
            // 修改学生信息并提交
            editUserInfo() {
            	 let form = new FormData()
                     form.append('id',this.editStudentForm.id)
                     form.append('realName',this.editStudentForm.realName)
                     form.append('username',this.editStudentForm.username)
                     form.append('password',this.editStudentForm.password)
                     form.append('parentPhone',this.editStudentForm.parentPhone)
                     form.append('parent',this.editStudentForm.parent)
                     form.append('sex',this.editStudentForm.sex)
                     form.append('enteryear',this.editStudentForm.enteryear)
                     form.append('classroomId',this.editStudentForm.clsName)
                this.$refs.editStudentFormRef.validate(async valid => {
                    if (!valid) return               
                    const  { data: res } = await this.$http.put( '/student' , form )

                    if (res.code !== 200) {
                        return this.$message.error(res.msg)
                    }

                    // 关闭对话框
                    this.editStudentVisible = false
                    // 刷新数据列表
                    this.getStudentList()
                    // 提示修改成功
                    this.$message.success('更新学生信息成功！')
                })
            },
            // 根据Id删除对应的学生信息
            async removeStudentById(id) {
                // 弹框询问学生是否删除数据
                const confirmResult = await this.$confirm(
                    '此操作将永久删除该学生, 是否继续?',
                    '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).catch(err => err)

                // 如果学生确认删除，则返回值为字符串 confirm
                // 如果学生取消了删除，则返回值为字符串 cancel
                // console.log(confirmResult)
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }

                const {
                    data: res
                } = await this.$http.delete('/student/'+ id )

                if (res.code !== 200) {
                    return this.$message.error('删除学生失败！')
                }

                this.$message.success('删除学生成功！')
                this.getStudentList()
            },

            // 监听分配角色对话框的关闭事件
            setRoleDialogClosed() {
                this.selectedRoleId = ''
                this.userInfo = {}
            },
            handleRemove(file, fileList) {
                console.log(file, fileList)
            },
            handlePreview(file) {
                console.log(this.fileList)
                console.log(file.response)
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
            },
            beforeRemove(file, fileList) {
                console.log(fileList.slice(-3))
                return this.$confirm(`确定移除 ${file.name}？`)
            }
        }
    }
</script>

<style lang="less" scoped>
</style>
